<template>
  <div class="container">
    <!-- 回到顶部 -->
    <div class="toTop" @click="isToTop">
      <img src="../../static/img/home/arrow_go_to_top.png" alt="">
    </div>
    <div class="content">
        <div class="upBox">
          <div class="telephone">
            <div>
              <img src="../../static/img/home/home_foot_tel.png" alt="">
              <div>
                <p>欢迎拨打</p>
                <p>咨询热线</p>
              </div>
            </div>
            <p class="phone">400-877-9737</p>
          </div>
          <div class="download">
            <img src="../../static/img/home/erweima.png" alt="">
            <div>
              <p>APP下载</p>
              <p>车宜拍</p>
            </div>
          </div>
          <div class="Link">
            <h4>友情链接:</h4>
            <div class="con">
              <p>
                <a href="https://www.ucarcloud.cn" target="_blank">北京宜行科技</a>
              </p>
            </div>
          </div>
        </div>
        <div class="lowerBox">
          版权所有 北京宜行科技有限公司 COPYRIGHT 2016-2020 DESIGN BY UCARCLOUD 京ICP备17033352号
        </div>
    </div>
  </div>
</template>
<script>
export default {
  // watch: {
  //   '$route' (val, oldVal) {
  //     if (location.hash === '#/home') {
  //       $('.toTop').show(0)
  //     } else {
  //       $('.toTop').hide(0)
  //     }
  //   }
  // },
  methods: {
    isToTop () {
      $('html, body').animate({scrollTop: 0}, 500)
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
  width: 100%;
  background-color: #393939;
  padding: 30px 0;
  position: relative;
  .toTop{
    display: none;
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 10px;
    right: 150px;
    background: #444;
    cursor: pointer;
    &:hover{
      background: #ff6f3c;
    }
    img{
      width: 22px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -6px;
      margin-left: -12px;
    }
  }
  .content{
    width: 1200px;
    margin: 0 auto;
    .upBox{
      overflow: hidden;
      .telephone{
        float: left;
        width: 200px;
        .phone{
          font-size: 22px;
          color: #fff;
          padding-top: 20px;
        }
        div{
          img{
            vertical-align: -6px;
            width: 44px;
            margin-right: 10px;
          }
          div, img{
            display: inline-block;
          }
          p{
            color: #ff6f3c;
            line-height: 20px;
            font-size: 14px;
          }
        }
      }
      .download{
        float: left;
        width: 250px;
        img{
          width: 110px;
          height: 110px;
          margin-right: 10px;
          vertical-align: -30px;
        }
        img, div{
          display: inline-block;
        }
        div{
          p{
            font-size: 18px;
            color: #fff;
            margin: 12px 0;
          }
        }
      }
      .Link{
        color: #fff;
        font-size: 14px;
        width: 750px;
        display: inline-block;
        overflow: hidden;
        .con{
          padding-top: 10px;
          overflow: hidden;
          width: 810px;
          p{
            width: 210px;
            cursor: pointer;
            margin-top: 10px;
            display: inline-block;
            margin-right: 60px;
            float: left;
            a{
              color: #ddd;
              &:hover{
                color: #ff6f3c;
              }
            }
          }
        }
      }
    }
    .lowerBox{
      margin-top: 40px;
      color: #fff;
      font-size: 14px;
      text-align: center;
    }
  }
}

</style>
